<template>
    <div>
        <div class="success-page">
            <div class="header">
                <!--            <div class="font-one" :style="{color :getFontColor }">实名通行证</div>-->
                <!--            <div class="font-two" :style="{color :getFontColor }">沈阳市民政局</div>-->
            </div>
            <div class="content" :style="{borderColor: getColor}">
                <notice-bar :color="getColor" :bg="getBgColor"></notice-bar>
                <div class="title" style="width: 220px;margin-bottom: 2px;font-weight: bold">
                    <div>
                        主 &nbsp;&nbsp;动 &nbsp;&nbsp;出 &nbsp;&nbsp;示
                    </div>
                    <div>
                        配 &nbsp;&nbsp;合 &nbsp;&nbsp;检 &nbsp;&nbsp;查
                    </div>
                </div>
                <div class="qrcode">
                    <div class="box" style="padding: 10px" :style="{borderColor:getColor}">
                        <template v-if="loading" style="text-align:center;">
                            <van-row>
                                <van-col span="24" style="margin-top:80px; text-align:center;">
                                    <van-loading type="spinner" size="36px"
                                                 text-size="20px" vertical>
                                        加载中
                                    </van-loading>
                                </van-col>
                            </van-row>
                        </template>
                        <div id="qrCode" ref="qrCode"></div>
                    </div>
                </div>
                <!--<div class="user-info" v-if="false">
                    <van-row type="flex" justify="center">
                        <van-col span="12" style="font-size: 14px;text-align:center;margin-bottom: 5px">
                            <span style="color: red">{{totalTime}}</span>秒后刷新
                        </van-col>
                    </van-row>
                    <div class="table-info">
                        <van-row style="border-bottom:1px solid #f3f3f3;" class="table-info-row">
                            <van-col span="10" class="table-right-border table-col">
                                <span class="title-x">姓名：</span>
                                <span class="value" style="text-align: center">{{userInfo.name}}</span>
                            </van-col>
                            <van-col span="7" class="table-right-border table-col van-row&#45;&#45;justify-center">
                                <span class="title-x">性别：</span>
                                <span class="value">{{userInfo.sex}}</span>
                            </van-col>
                            <van-col span="7" class="table-col van-row&#45;&#45;justify-center">
                                <span class="title-x">年龄：</span>
                                <span class="value">{{userInfo.age}}</span>
                            </van-col>
                        </van-row>
                        <van-row class="table-info-row">
                            <van-col span="24" class="table-col">
                                <span class="title-x address-width">地址：</span>
                                <span class="value">{{userInfo.loc_address}}</span>
                            </van-col>
                        </van-row>
                    </div>
                </div>-->
                <div class="user-info">
                    <van-row type="flex" justify="center">
                        <van-col span="12" style="font-size: 14px;text-align:center;margin-bottom: 5px">
                            <span style="color: red">{{totalTime}}</span>秒后自动刷新
                        </van-col>
                    </van-row>
                    <div class="table-info" :style="{borderColor:getColor}">
                        <van-row style="border-bottom:1px solid;text-align: center" class="table-info-row2"
                                 :style="{borderColor:getColor}">
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                <div>姓名</div>
                            </van-col>
                            <van-col span="6" class="table-info-row2-col table-right-border value"
                                     :style="{borderColor:getColor}">
                                {{userInfo.name}}
                            </van-col>
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                性别
                            </van-col>
                            <van-col span="3" class="table-info-row2-col table-right-border value"
                                     :style="{borderColor:getColor}">
                                {{userInfo.sex}}
                            </van-col>
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                年龄
                            </van-col>
                            <van-col span="3" class="table-info-row2-col value">
                                {{userInfo.age}}
                            </van-col>
                        </van-row>
                        <van-row class="table-info-row2" type="flex" align="center">
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                住所
                            </van-col>
                            <van-col span="20" class="table-info-row2-col value" style="padding-left:5px">
                                {{userInfo.loc_address}}
                            </van-col>
                        </van-row>
                    </div>
                </div>
                <van-row class="btn-round" type="flex" justify="space-around">
                    <van-col span="6" class="van-row--justify-center van-row--flex" @click="update">
                        <van-circle
                                v-model="currentRate"
                                class="wl-circle"
                                :stroke-width="20"
                                :color="getCircleColor"
                                :fill="getFillColor"
                                :size="fontSize">
                            <div class="z100">信息</div>
                            <div class="z100">复核</div>
                        </van-circle>
                    </van-col>
                    <van-col span="6" class="van-row--justify-center van-row--flex" @click="applyAdd">
                        <van-circle
                                v-model="currentRate"
                                class="wl-circle"
                                :size="fontSize"
                                :color="getCircleColor"
                                :fill="getFillColor"
                                :stroke-width="20">
                            <div class="z100">申请</div>
                            <div class="z100">増办</div>
                        </van-circle>
                    </van-col>
                    <van-col span="6" class="van-row--justify-center van-row--flex" @click="check">
                        <van-circle
                                v-model="currentRate"
                                class="wl-circle"
                                :stroke-width="20"
                                :color="getCircleColor"
                                :fill="getFillColor"
                                :size="fontSize">
                            <div class="z100">每日</div>
                            <div class="z100">自查</div>
                        </van-circle>
                    </van-col>
                    <van-col span="6" class="van-row--justify-center van-row--flex" @click="report">
                        <van-circle
                                v-model="currentRate"
                                class="wl-circle"
                                :size="fontSize"
                                :color="getCircleColor"
                                :fill="getFillColor"
                                :stroke-width="20">
                            <div class="z100">疫情</div>
                            <div class="z100">举报</div>
                        </van-circle>
                    </van-col>
                </van-row>
            </div>
        </div>
        <!--<van-tabbar>
            <van-tabbar-item icon="chat-o" name='1' url="https://mp.weixin.qq.com/s/BQKXZgb3YHiy38csfv9cjQ">在线客服
            </van-tabbar-item>
            <van-tabbar-item icon="service-o" name='2' url="https://mp.weixin.qq.com/s/TRLYCrEDWHg0CYRPkeaSWw">视频客服
            </van-tabbar-item>
        </van-tabbar>-->
    </div>
</template>

<script>
import { getOpenidMsg, SelectRandomNumber } from '@/api/yi-qing-fang-kong.js'
import distData from '@/libs/dist.js'
// import { Dialog } from 'vant'
import QRcode from 'qrcodejs2'
import {
  // noSensitiveName,
  getAgeByIdCard
} from '@/libs/tools'
import NoticeBar from '../../../components/notice-bar/index'

export default {
  components: { NoticeBar },
  data () {
    return {
      id: '',
      fontSize: 60,
      currentRate: 0,
      circleColor: '#DDDDDD',
      fillColor: '#f5f5f5',
      userInfo: {
        name: '暂无',
        address: '暂无',
        sex: '暂无',
        age: '暂无',
        loc_address: '暂无'
      },
      randomNum: '',
      totalTime: 0,
      con: 0,
      offsetheight: document.documentElement.clientHeight - 10,
      qrColor: distData.qrColor,
      fontColor: distData.fontColor,
      borderColor: distData.borderColor,
      bgColor: distData.bgColor,
      cardType: 2,
      loading: false,
      openid: ''
    }
  },
  computed: {
    getColor () {
      console.log('---', this.qrColor[this.cardType])
      return this.qrColor[this.cardType]
    },
    getCircleColor () {
      return this.borderColor[this.cardType]
    },
    getFillColor () {
      return this.qrColor[this.cardType]
    },
    getFontColor () {
      return this.fontColor[this.cardType]
    },
    getBgColor () {
      console.log('-bg--', this.bgColor[this.cardType])
      return this.bgColor[this.cardType]
    }
  },
  methods: {
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    },
    getRandomNumber () {
      // 调取随机串接口
      this.loading = true
      SelectRandomNumber().then(ret => {
        let data = ret.data
        console.log('定时生成串回调', data)
        if (data.errcode === 0) {
          this.randomNum = data.data.num
          this.totalTime = data.data.surplus_second
          this.bindQRCode()
        }
        this.loading = false
      })
    },
    interval () {
      let _this = this
      this.con = setInterval(() => {
        // console.log('倒计时', _this.totalTime)
        if (_this.totalTime === 0) {
          // 清空渲染的二维码
          console.log('执行刷新')
          _this.$refs.qrCode.innerHTML = ''
          _this.totalTime = 30
          // 调用随机码
          _this.getRandomNumber()
          return false
        } else {
          _this.totalTime -= 1
        }
      }, 1000)
    },
    bindQRCode () {
      console.log('二维码生成时候的随机码', this.randomNum)
      let qrcode = new QRcode('qrCode', {
        width: 200,
        height: 200, // 高度
        text: this.$common.xeUtils.locat().origin + '/#/epidemic-user-info?randomNum=' + this.randomNum, // 二维码内容
        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        colorDark: this.getColor, // 二维码颜色
        colorLight: '#ffffff' // 二维码背景色
      })
      console.log('-二维码-', qrcode)
    },
    // 申请增办
    applyAdd () {
      clearInterval(this.con)
      this.$router.push({
        name: 'epidemic-newly-added'
      })
    },
    // 每日自查
    review () {
      clearInterval(this.con)
      this.$router.push({
        name: 'epidemic-check-platform'
      })
    },
    // 信息修正
    update () {
      clearInterval(this.con)
      this.$router.push({
        name: 'epidemic-update-mz'
      })
    },
    // 每日自查
    check () {
      clearInterval(this.con)
      this.$router.push({
        name: 'epidemic-day-submit'
      })
    },
    // 疫情举报
    report () {
      clearInterval(this.con)
      this.$router.push({
        name: 'mine-complaint-submit'
      })
    },
    // 心理咨询
    advice () {
      clearInterval(this.con)
      this.$router.push({
        name: 'epidemic-remote-inquiry'
      })
    },
    tips () {
      this.$dialog.alert({
        message: '敬请期待！'
      })
    },
    getOpenidMsgAction () {
      getOpenidMsg().then(ret => {
        if (ret.data.errcode === 0) {
          console.log('获取注册过的人员信息以及type', ret.data)
          let data = ret.data.data.result
          if (data) {
            this.userInfo = data
            // this.userInfo.name = noSensitiveName(this.userInfo.name)
            this.userInfo.age = getAgeByIdCard(this.userInfo.card_no)
            this.cardType = data.type
            this.interval()
          } else {
            console.log('没有此人信息')
            this.$dialog.alert({
              message: '欢迎您办理通行证'
            }).then(() => {
              let debug = this.$route.query.debug
              let query = {}
              if (debug === 'debug') {
                query = { debug: debug }
              }
              this.$router.push({
                name: 'epidemic-submit-mz',
                query: query
              })
            })
          }
        } else {
          this.failNotice(ret.data.errmsg)
        }
      })
    }
  },
  mounted () {
    this.getOpenidMsgAction()
    this.$common.wxCallBack(function () {

    })
  },
  beforeDestroy () {
    clearInterval(this.con)
  }
}
</script>

<style scoped lang="less">
    @borderColor: #f5f5f5;
    .success-page {
        background-image: url("../../../assets/images/showinfo/bg.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        min-height: 667px;
        display: flex;
        justify-content: center;

        .header {
            width: 100%;
            height: 175px;
            text-align: center;

            .font-one {
                margin-top: 20px;
                font-size: 25px;
                color: white;
                font-weight: 900;
            }

            .font-two {
                margin-top: 8px;
                font-size: 13px;
                color: white;
            }
        }

        .bottom {
            width: 100%;
            position: absolute;
            bottom: 0px;
            text-align: center;
            display: flex;
            justify-content: center;
            font-size: 12px;
            color: #1989FA;

            .bottom-font {
                margin-right: 10px;
            }
        }

        .content {
            overflow: hidden;
            top: 5.5rem;
            position: absolute;
            background-color: white;
            border-radius: 5px;
            width: 280px;
            height: auto;
            padding-bottom: 25px;
            border: 1px solid;

            .qrcode {
                display: flex;
                justify-content: center;
            }

            .qrcode .box {
                border: 1px solid red;
            }

            .title {
                /*padding-top: 15px;*/
                /*letter-spacing: 0.375rem;*/
                display: flex;
                justify-content: space-between;
                margin: 0 auto;
                font-size: 12px;
                color: red;
            }
        }

        .user-info {
            padding: 5px 10px 10px 10px;

            .name {
                color: #363636;
                font-weight: bold;
            }

            .address {
                font-size: 14px;
            }
        }
    }

    .out-button {
        margin-top: 10px;
    }

    .button {
        text-align: center;

        .van-button {
            height: 1.75rem;
            line-height: 1.625rem;
        }

        .van-button--normal {
            font-size: 0.75rem;
            padding: 0 1.375rem
        }

        .van-button--primary {
            color: black;
            background-color: #f9f9f9;
            border: 1px solid #DDDDDD
        }
    }

    .button-two {
        margin-left: 15px;
    }

    .button-h {
        text-align: center;
        margin-top: 5px;

        .van-button {
            height: 1.75rem;
            line-height: 1.625rem;
        }

        .van-button--normal {
            font-size: 0.75rem;
            padding: 0 1.375rem
        }

        .van-button--primary {
            color: black;
            background-color: #f9f9f9;
            border: 1px solid #DDDDDD
        }
    }

    .title-x {
        font-size: 14px;
    }

    .value {
        color: #787878;
        font-size: 13px;
    }

    .table-info {
        padding: 0px 4px 0 4px;
        border: 1px solid @borderColor;

        .table-info-row {
            display: flex;
            align-items: center;
        }

        .table-info-row2 {
            height: 45px;

            .table-right-border {
                border-right: 1px solid @borderColor;
            }

            .table-left-border {
                margin-left: -1px;
                border-left: 1px solid #DDDDDD;
                padding: 5px 0 5px 0;
            }

            .table-right-border-end {
                padding: 5px 0 5px 0;
            }

            .table-info-row2-col {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .table-col {
            display: flex;
            align-items: center;
            padding: 5px 0 5px 0;

            .address-width {
                width: 50px;
            }
        }
    }

    .btn-round {
        margin-top: 10px;

        .round {
            border-right: 1px solid red;
            border-radius: 50%;
        }
    }

    .wl-circle {
        display: flex;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        box-shadow: 2px 2px 5px #696767;
    }

    .z100 {
        font-size: 12px;
        z-index: 100;
        color: #FFFFFF;
    }

    /deep/ .van-tabbar {
        z-index: 9999;
    }
</style>
